<template>
  <div class="dashboard-editor-container">
    <div style="margin-bottom: 20px;">
      <el-form ref="form" label-width="80px" :inline="true" size="small">
        <el-form-item label="所属部门">
          <el-select v-model="form.deptName" clearable placeholder="请选择部门">
            <el-option
              v-for="item in dept"
              :key="item.value"
              :label="item.label"
              :value="item.label"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="所属科室">
          <el-select v-model="form.deptName" clearable placeholder="请选择部门">
            <el-option
              v-for="item in dept"
              :key="item.value"
              :label="item.label"
              :value="item.label"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="人员身份">
          <el-select v-model="form.deptName" clearable placeholder="请选择部门">
            <el-option
              v-for="item in dept"
              :key="item.value"
              :label="item.label"
              :value="item.label"
            />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="small" @click="handleQuery">搜索</el-button>
          <el-button icon="el-icon-refresh" size="small" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div style="overflow: hidden;">
      <div style="width: 60%;float: left;">
        <el-row :gutter="32">
          <el-col :xs="24" :sm="24">
            <div class="chart-wrapper">
              <!-- 专业类别 -->
              <bar-chart :chart-data="majorList" title="专业类别分布统计" />
            </div>
          </el-col>
        </el-row>
        <el-row :gutter="32">
          <el-col :xs="24" :sm="24">
            <div class="chart-wrapper">
              <bar-chart3 />
            </div>
          </el-col>
        </el-row>
      </div>
      <div style="width: 40%;float: right;padding-left: 30px;">
        <el-row :gutter="32">
          <el-col :xs="24" :sm="24">
            <div class="chart-wrapper">
              <bar-chart2 />
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
    <div style="overflow: hidden;">
      <div style="width: 50%;float: left;padding-right: 15px;">
        <div class="chart-wrapper">
          <bar-chart :chart-data="cognizanceTitleList" title="认定职称统计" />
        </div>
      </div>
      <div style="width: 50%;float: right;padding-left: 15px;">
        <div class="chart-wrapper">
          <bar-chart :chart-data="cognizanceRankList" title="认定职级统计" />
        </div>
      </div>
    </div>
    <div style="overflow: hidden;">
      <div style="width: 50%;float: left;padding-right: 15px;">
        <div class="chart-wrapper">
          <bar-chart :chart-data="employTitleList" title="聘用职称统计" />
        </div>
      </div>
      <div style="width: 50%;float: right;padding-left: 15px;">
        <div class="chart-wrapper">
          <bar-chart :chart-data="employRankList" title="聘用职级统计" />
        </div>
      </div>
    </div>
    <div style="overflow: hidden;">
      <div style="width: 100%;">
        <div class="chart-wrapper">
          <bar-chart4 title="3D" />
        </div>
      </div>
      
    </div>
  </div>
</template>

<script>
import BarChart from './components/majorBarChart'
import BarChart2 from './components/personIdentityBarChart'
import BarChart3 from './components/educationChart'
import BarChart4 from './components/3dMap'

export default {
  name: 'DashboardAdmin',
  components: {
    BarChart4,
    BarChart,
    BarChart2,
    BarChart3
  },
  data() {
    return {
      form: {},

      majorList: { // 专业类别
        dataName: ['专业名称1', '专业名称2', '专业名称3', '专业名称4', '专业名称5', '专业名称6', '专业名称7'],
        dataList: [179, 52, 200, 334, 390, 330, 220]
      },
      // personIdentityList:{ //人员身份
      //     dataName: ['编内', '备案制', '合同制', '委派', '返聘', '外聘', '试用期', '见习期', '见习基地', '劳务派遣', '"试工'],
      //     dataList: [179, 52, 200, 334, 390, 330, 220,334, 390, 330, 220],
      // },
      // educationList:{ //学历
      //     dataName: ['博士', '硕士', '大学本科', '大专', '中专', '技校', '职高'],
      //     dataList: [ 390, 330, 220,334, 390, 330, 220],
      // },
      cognizanceTitleList: { // 认定职称
        dataName: ['职称1', '职称2', '职称3', '职称4', '职称5', '职称6', '职称7'],
        dataList: [67, 30, 20, 34, 90, 30, 22]
      },
      cognizanceRankList: { // 认定职级
        dataName: ['职级1', '职级2', '职级3', '职级4', '职级5', '职级6', '职级7'],
        dataList: [67, 30, 220, 34, 190, 130, 22]
      },
      employTitleList: { // 聘用职称
        dataName: ['职称1', '职称2', '职称3', '职称4', '职称5', '职称6', '职称7'],
        dataList: [67, 30, 20, 134, 190, 30, 122]
      },
      employRankList: { // 聘用职级
        dataName: ['职级1', '职级2', '职级3', '职级4', '职级5', '职级6', '职级7'],
        dataList: [67, 30, 420, 34, 490, 30, 222]
      },
      dept: [{
        value: '0',
        label: '行政办公室'
      },
      {
        value: '1',
        label: '人力资源部'
      },
      {
        value: '2',
        label: '工会办公室'
      },
      {
        value: '3',
        label: '安全监察'
      },
      {
        value: '4',
        label: '质控管理部'
      },
      {
        value: '5',
        label: '信息技术部'
      },
      {
        value: '6',
        label: '数智企业部'
      }
      ]

    }
  },
  methods: {
    resetQuery() {

    },
    handleQuery() {}
  }
}
</script>

  <style lang="scss" scoped>
  .dashboard-editor-container {
    padding: 32px;
    background-color: rgb(240, 242, 245);
    position: relative;

    .github-corner {
      position: absolute;
      top: 0px;
      border: 0;
      right: 0;
    }

    .chart-wrapper {
      background: #fff;
      padding: 16px 16px 0;
      margin-bottom: 32px;
      border-radius: 10px;
    }
  }

  @media (max-width:1024px) {
    .chart-wrapper {
      padding: 8px;
    }
  }
  </style>
